<template>
  <div class="page-box">
    <!-- 表格部分 -->
    <div class="table-box">
      <!-- <el-card :body-style="{ padding: '0px' }" shadow="hover"> -->
      <el-table ref="multipleTable" v-loading="tableLoading" border element-loading-text="拼命加载中" :data="tableData">
        <el-table-column prop="errorType" align="center" label="类型">
        </el-table-column>
        <el-table-column align="center" label="导入时间">
          <template slot-scope="scope">
            <div>
              {{$moment(scope.row.gmtCreate)}}
            </div>

          </template>
        </el-table-column>
        <el-table-column align="center" label="有无错误">
          有
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button v-on:click="downTem(scope.row)">导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->
    </div>
    <div v-if="sumPage" class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="thisPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="sumPage"></el-pagination>
    </div>
  </div>
</template>
<script>
import { queryPaginationErrorImportLogs } from "@/api/api";
export default {
  data() {
    return {
      tableLoading: false,
      pageSize: 10, //每页多少条
      thisPage: 1, //当前页
      sumPage: 0, //一共有多少条
      tableData: [] //表格数据
    };
  },
  watch: {
    thisActivityId(a, b) {
      this.initFun();
    }
  },
  mounted() {
    this.initFun();
  },
  methods: {
    downTem(scopeRow) {
      const importInfo = JSON.parse(scopeRow.importInfo);
      console.log(importInfo);
      if (!importInfo.length) {
        this.$message({
          message: "无下载数据",
          type: "warning"
        });
        return;
      }
      let that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("./../../vendor/Export2Excel"); //这里必须使用绝对路径
        let tHeader = []; // 导出的表头名
        let filterVal = []; // 导出的表头字段名

        Object.keys(importInfo[0]).map(item => {
          tHeader.push(importInfo[0][item]);
          filterVal.push(item);
        });

        let importInfoData = [];
        importInfo.map((item, index) => {
          if (index) {
            importInfoData.push(item);
          }
        });
        console.log(importInfoData);

        const data = this.formatJson(filterVal, importInfoData);
        export_json_to_excel(tHeader, data, scopeRow.errorType);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    async initFun() {
      this.getTableData();
    },
    // 得到表格数据
    async getTableData() {
      this.tableLoading = true;
      const { data = [] } = await queryPaginationErrorImportLogs({
        // ...(this.$refs.seachFrom.subSearchFrom || {}),
        activityId: this.$store.state.activityId.thisActivityId,
        start: (this.thisPage - 1) * this.pageSize,
        size: this.pageSize,
        isError: 1,
        isPay: "pay"
      });
      this.tableLoading = false;
      this.tableData = data.result.isvImportErrorLogs || [];
      this.sumPage = data.result.count || 0;
      console.log(this.tableData);
      console.log(data.result.count);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.thisPage = val;
      this.getTableData();
    }
  }
};
</script>
